import { Breadcrumb } from "antd";
import { Link, useLocation } from "react-router-dom";
import { genBreadcrumbNameMap, genMenuOpenKeys } from "@/utils";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

const BasicBreadcrumb = () => {
  const location = useLocation();
  const menuItems = useSelector((state: RootState) => state.user.menuItems);

  const breadcrumbNameMap = genBreadcrumbNameMap(menuItems, {});
  const keys = genMenuOpenKeys(location.pathname);

  const items = keys.map((key) => ({
    key: key,
    label: breadcrumbNameMap[key],
  }));
  // console.log("items", items);
  return (
    <Breadcrumb>
      {/*<Breadcrumb.Item>Home</Breadcrumb.Item>*/}
      {items.map((item) => {
        return (
          <Breadcrumb.Item key={item.key}>
            <Link to={item.key}>{item.label}</Link>
          </Breadcrumb.Item>
        );
      })}
    </Breadcrumb>
  );
};

export default BasicBreadcrumb;
